<template>
  <div class="home">
    <header>
        <div class="home-nav">
          <ul>
            <li v-for="(s,index) in menu" @click="selected(index)" :class="{active: index ===  activeName}" ><a >{{s.text}}</a></li>
          </ul>
        </div>
    </header>
    <bot-footer></bot-footer>
  </div>

</template>

<script>
import BotFooter from './LoginRegister/footer'
export default {
name: 'home',
data(){
  return {
    menu:[{
      text: '早午茶'
    },{
        text: '我的订阅'
    },{
        text: '猜您喜欢'
    },{
        text: '视频'
    },{
        text: '音乐'
    },{
        text: '画册'
    }],
    activeName: 0

  }
},
components: {
  BotFooter
},
methods: {
  selected: function(menu) {
       this.activeName = menu
     }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.home-nav{
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #232427;
  position: relative;
  overflow-y: auto;

ul{
  padding-left: 0px;
  list-style-type: none;

display: flex;



    li:first-child{
        padding-right: 14px;
    }


  li{
    list-style: none;
    float:left;
    margin-left:  14px;
    flex-direction:row;
    white-space: nowrap;

    a{
      color: #fff;
    }

  }

  li:last-child{
       padding-right: 14px;
 }

 li.active a {
   color:#15a4ae;
 }

}
}
/*.nav .line:nth-child(1) a{
    color: #26a69a;
}*/
</style>
